<template>
	<view class="content">
		<view class="uni-form-item uni-column">
			<uni-section title="Article Title" type="line" padding>
				<uni-easyinput type="textarea" v-model="articleReq.name" placeholder="Input article title...">
				</uni-easyinput>
			</uni-section>
		</view>
		<view class="uni-form-item uni-column">
			<uni-section title="Article Abstract" type="line" padding>
				<uni-easyinput type="textarea" v-model="articleReq.abstract" placeholder="Input article abstract...">
				</uni-easyinput>
			</uni-section>
		</view>
		<view class="uni-form-item uni-column">
			<uni-section title="Article Description" type="line" padding>
				<uni-easyinput type="textarea" v-model="articleReq.description"
					placeholder="Input article description..."></uni-easyinput>
			</uni-section>
		</view>
		<view class="uni-form-item uni-column">
			<uni-section title="Article Tags" type="line" padding>
				<uni-tag class="article-tag" :text="tagName(tag.id)" type="primary" v-for="tag in articleReq.tags"
					:key="tag.id" />
				<div class="new-tag-widget">
					<div class="new-tag-input" placeholder="输入新标签..." contenteditable="true"></div>
					<uni-icons type="close" size="12"></uni-icons>
				</div>

			</uni-section>
		</view>
		<button type="primary" plain="true" @click="update">Update this article</button>
	</view>
</template>

<script lang="ts">
	import {
		ArticleMeta,
		ArticleRequest
	} from '@/models/article'
	import {
		ArticleTag
	} from "@/models/tags"
	import {
		updateArticle
	} from "@/service/articles"
	export default {
		data() {
			const req: ArticleRequest = {
				name: "",
				abstract: "",
				description: "",
				rate: 0.0,
				tags: [{
					id: 1,
				}, {
					id: 2
				}],
				link: "",
				introducer: {
					id: 1
				}
			};
			const tags: ArticleTag[] = []
			return {
				articleReq: req,
				tags: tags,
				channel: null
			}
		},
		onLoad(options) {

			const data: ArticleRequest = JSON.parse(decodeURIComponent(options['data']))
			console.log('data', data)
			uni.setNavigationBarTitle({
				title: `Editing Article ${data.name}`
			})
			this.articleReq = data
			uni.request({
				url: `api/tags/all`,
				method: "GET",
				success: (res) => {
					this.tags = res.data as ArticleTag[]
					console.log(this.tags)
				}
			});

		},
		computed: {
			tagName: function() {
				return (tagID: number) => {
					console.log('tagID', tagID, this.tags)
					const tag = this.tags.find((tag) => tag.id == tagID)
					console.log(tag)
					if (tag != null) {
						return tag.name || "Unknown"
					} else {
						return "Unknown"
					}
				}
			}
		},

		methods: {
			queryTagName(tagID: number) {
				const tag = this.tags.find((tag) => tag.id == tagID)
				if (tag != null) {
					return tag.name
				} else {
					return ""
				}
			},
			update() {
				updateArticle(this.articleReq)
			}
		}
	}
</script>

<style>
	.content {}

	.uni-input {
		border: 1px #bbbbbb solid;
		height: 28px;
		line-height: 28px;
		font-size: 15px;
		padding: 0px;
		flex: 1;
		background-color: #FFFFFF;
	}

	.new-tag-input {
		max-height: 25px;
		min-height: 25px;
		display: inline-block;
		min-width: 20px;
		/* max-width: 100px; */
	}

	.new-tag-input .uni-input-placeholder {
		color: #eee;
	}

	.new-tag-widget {
		background-color: #2979ff;
		color: #fff;
		display: inline-block;
	}
</style>
